import React, { useEffect, useState } from 'react'
import { message } from 'antd'
import PropTypes from 'prop-types'
import style from './ClaimListShower.module.less'

// 格式化钱
function formatMoney (num = 0) {
  return String(num || 0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' 元'
}

// 格式化请求内容
function formatClaimValue (d) {
  const { desc, type } = d
  if (type === '标的收费') {
    return `${desc || ''}（争议金额：${formatMoney(d.dispute_amount)}）`
  } else if (type !== '仲裁费') {
    return `${desc || ''}（${type || ''} | ${formatMoney(d.fee_acceptance)}）`
  } else {
    return `${desc || ''}（${type || ''}）`
  }
}

function Main ({ data, title }) {
  const [items, setItems] = useState([])
  useEffect(() => {
    if (!data) {
      return undefined
    }
    try {
      const claim = JSON.parse(data)
      setItems(claim.items)
    } catch (e) {
      message.warning('解析仲裁请求失败')
    }
  }, [data])
  return (
    <div className={style.container}>
      <div className={style.title}>{title}：</div>
      <div className={style.content}>
        {items.map((li, i) => {
          return (
            <div key={i}>{i + 1}、{formatClaimValue(li)}</div>
          )
        })}
      </div>
    </div>
  )
}

Main.propTypes = {
  data: PropTypes.string,
  title: PropTypes.string
}

Main.defaultProps = {
  data: '',
  title: ''
}

export default Main
